<template>
  <div class="main">
    <div class="top">
      <div class="header">
        <img src="~assets/img/experiment/logo.png" alt="logo" class="logo">
        <img src="~assets/img/experiment/logo_left.png" alt="logo-left" class="logoLeft">
        <img src="~assets/img/experiment/logo_right.png" alt="logo-right" class="logoRight">
        <el-row :gutter="0">
          <el-col :span="16" :offset="5" class="top-area">
            <p class="ex_name" v-if="experimentNumber !== 5">{{ experimentName }}</p>
            <button class="video" @click="handleVideo">
              <span class="iconfont icon-bofang2" style="color: #FFFFFF"></span>
              <span></span>
              <span class="button_word">演示视频</span>
            </button>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-row :gutter="11">
      <div class="left-area">
        <ex1_left v-if="currentExperimentNo===1" @changeExperimentNo="changeExperimentNo"></ex1_left>
        <ex2_left v-else-if="currentExperimentNo===2" @changeExperimentNo="changeExperimentNo"></ex2_left>
        <ex3_left v-else-if="currentExperimentNo===3" @changeExperimentNo="changeExperimentNo"></ex3_left>
        <ex4_left v-else-if="currentExperimentNo===4" @changeExperimentNo="changeExperimentNo"></ex4_left>
        <ex_nothing_left @changeExperimentNo="changeExperimentNo" v-else></ex_nothing_left>
      </div>
      <el-row>
        <el-col class="right_top_area">
          <ex1_right v-if="currentExperimentNo===1" @changeExperimentNo="changeExperimentNo"></ex1_right>
          <ex2_right v-else-if="currentExperimentNo===2" @changeExperimentNo="changeExperimentNo"></ex2_right>
          <ex3_right v-else-if="currentExperimentNo===3" @changeExperimentNo="changeExperimentNo"></ex3_right>
          <ex4_right v-else-if="currentExperimentNo===4" @changeExperimentNo="changeExperimentNo"></ex4_right>
          <ex_nothing_right v-else></ex_nothing_right>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
const ex1_left = () => import('components/experiment/ex1/ex1_left')
const ex2_left = () => import('components/experiment/ex2/ex2_left')
const ex3_left = () => import('components/experiment/ex3/ex3_left')
const ex4_left = () => import('components/experiment/ex4/ex4_left')
const ex_nothing_left = () => import('components/experiment/ex_nothing/ex_nothing_left')

const ex1_right = () => import('components/experiment/ex1/ex1_right')
const ex2_right = () => import('components/experiment/ex2/ex2_right')
const ex3_right = () => import('components/experiment/ex3/ex3_right')
const ex4_right = () => import('components/experiment/ex4/ex4_right')
const ex_nothing_right = () => import('components/experiment/ex_nothing/ex_nothing_right')
export default {
  name: "experimentPage",
  inject: ['reload'],
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      currentExperimentNo: 0,
      dialogVideoVisible: false,
      experimentName: "",
      experimentNumber: 0,
      ex1_name: "正在进行 步骤一：H型编队设计",
      ex2_name: "正在进行 步骤二：H型变换Z型路线设计",
      ex3_name: "正在进行 步骤三：夜间灯光设计",
      ex4_name: "正在进行 拓展步骤：N型变换Z型",
      ex_nothing_name: ""
    }
  },
  components: {
    ex1_left,
    ex2_left,
    ex3_left,
    ex4_left,
    ex_nothing_left,

    ex1_right,
    ex2_right,
    ex3_right,
    ex4_right,
    ex_nothing_right
  },
  methods: {
    // 修改当前实验
    changeExperimentNo(experimentNo) {
      this.currentExperimentNo = experimentNo
      if (experimentNo === 1) {
        this.experimentName = this.ex1_name
      } else if (experimentNo === 2) {
        this.experimentName = this.ex2_name
      } else if (experimentNo === 3) {
        this.experimentName = this.ex3_name
      } else if (experimentNo === 4) {
        this.experimentName = this.ex4_name
      } else {
        this.experimentName = this.ex_nothing_name
      }
    },
    handleVideo() {
      this.dialogVideoVisible = true;
    }
  },
}
</script>

<style scoped>
@import "../../assets/css/experiment/experimentPage.css";
</style>
